<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <link rel="stylesheet" href="/assets/amazeui/css/amazeui.min.css">
    <link rel="stylesheet" href="/assets/iziModal/css/iziModal.css">

</head>
<body>
<div style="margin-top: 10px;"></div>



            <div class="am-g">
                <div class="am-u-sm-3 am-u-sm-offset-9 am-text-right am-u-end">
                    <div class="am-input-group am-input-group-sm">
                        <input id="i_search" type="text" class="am-form-field am-input-sm" placeholder="输入人员名称"/>
                        <span class="am-input-group-btn">
                            <button class="am-btn  am-btn-primary am-btn-sm am-icon-search" type="button" onclick="buttonQuery();"></button>
                        </span>
                    </div>
                </div>
            </div>

            <div style="margin-top: 10px;"></div>
            <div class="am-g">
                <div class="am-u-sm-12">
                    <table class="am-table am-table-bordered
                    am-table-radius am-table-striped am-scrollable-horizontal
                    am-table-compact">
                        <thead>
                        <tr style="text-align: center">
                            <td width="10%">人员编号</td>
                            <td width="10%">人员名称</td>
                            <td width="10%">联系电话</td>
                            <td width="10%">所属部门</td>
                            <td width="10%">创建时间</td>
                            <td width="10%">是否用户</td>
                            <td width="10%">用户名</td>
                            <td width="10%">操作</td>
                        </tr>
                        </thead>
                        <tbody id="i_tbody">
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="am-g">
                <div class="am-u-sm-12">
                    <div class="am-u-sm-2">
                        <div class="am-btn-group am-btn-group-sm">
                            <button type="button" class="am-btn am-btn-primary am-radius" onclick="openAdd();">新增</button>
                        </div>
                    </div>
                    <div class="am-u-sm-4 am-u-sm-offset-6 am-cf am-padding-horizontal-0">
                        <ul id="i_ul_page" class="am-pagination tpl-pagination am-fr am-margin-horizontal-0">
                        </ul>
                    </div>
                </div>
            </div>

<div id="modal-add" class="iziModal">
    <div><br/></div>
    <div class="am-g">
        <form class="am-form am-form-horizontal">
            <input type="hidden" name="staffId" id="i_staffId"/>
            <div class="am-form-group">
                <label for="i_name" class="am-u-sm-2 am-form-label">人员名称</label>
                <div class="am-u-sm-10">
                    <input type="text" id="i_name" placeholder="输入人员名称">
                </div>
            </div>
            <div class="am-form-group">
                <label for="i_phoneNum" class="am-u-sm-2 am-form-label">联系电话</label>
                <div class="am-u-sm-10">
                    <input type="text" id="i_phoneNum" placeholder="输入联系电话">
                </div>
            </div>
            <div class="am-form-group">
                <label for="i_deptId" class="am-u-sm-2 am-form-label">部门编号</label>
                <div class="am-u-sm-10">
                    <select id="i_deptId">
                        <#list depts as dept>
                            <option value="${dept.deptId}">${dept.name}</option>
                        </#list>
                    </select>
                </div>
            </div>

            <div class="am-form-group">
                <div class="am-u-sm-6 am-u-sm-offset-5">
                    <button class="am-btn am-btn-default" onclick="add();">提交</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div id="addMember" class="iziModal">
    这里添加用户
</div>

<script src="/assets/iziModal/js/jquery-2.2.4.js"></script>
<script src="/assets/iziModal/js/iziModal.js"></script>
<script>


    var rows = 10;

    loadTable(1);

    function add() {
        var name = $("#i_name").val();
        var phoneNum = $("#i_phoneNum").val();
        var deptId = $("#i_deptId").val();
        var staffId = $("#i_staffId").val();
        console.info(staffId)
        $.ajax({
            type: 'post',
            url: '/sys/staffer/add',
            data: {
                staffId: staffId,
                name: name,
                phoneNum: phoneNum,
                deptId: deptId
            },
            dataType: 'json',
            success: function(result){

                if(result.code==0){
                    alert(result.sucMsg);
                }else{
                    alert(result.errMsg);
                }
                closeAdd();
                loadTable(1);
            }
        });
    }


    function loadTable(page) {
        $.ajax({
            type: 'post',
            url: '/sys/staffer/queryList',
            data: {
                page: page,
                rows: rows
            },
            dataType: 'json',
            success: function(result){
                if(result && result.rows){

                    $("#i_tbody").html('');
                    $.each(result.rows,function(index,obj){

                        var isMember;
                        var btn;
                        if(obj.username){
                            isMember = "是";
                            btn = $("<td><div class='am-btn-group am-btn-group-xs'>" +
                                    "<a class='am-btn am-btn-primary am-radius' href='javascript:void(0);' onclick='edit(this);'>编辑</a>" +
                                    "</div></td>");
                        }else {
                            isMember = "否";
                            btn = $("<td><div class='am-btn-group am-btn-group-xs'>" +
                                    "<a class='am-btn am-btn-primary am-radius' href='javascript:void(0);' onclick='edit(this);'>编辑</a>" +
                                    "<a class='am-btn am-btn-primary am-radius' href='javascript:void(0);' onclick='addMember("+obj.stafferId+");'>添加用户</a>" +
                                    "</div></td>");
                        }
                        var stafferId = $("<td>"+obj.stafferId+"</td>");
                        var name = $("<td>"+obj.name+"</td>");
                        var phoneNum = $("<td>"+obj.phoneNum+"</td>");
                        var deptName = $("<td name="+obj.deptId+">"+obj.deptName+"</td>");
                        var createTime = $("<td>"+obj.createTime+"</td>");
                        var isMember = $("<td>"+isMember+"</td>");
                        var username = $("<td>"+obj.username+"</td>");

                        var tr = $("<tr></tr>");
                        tr.append(stafferId);
                        tr.append(name);
                        tr.append(phoneNum);
                        tr.append(deptName);
                        tr.append(createTime);
                        tr.append(isMember);
                        tr.append(username);
                        tr.append(btn);

                        $("#i_tbody").append(tr);
                    });
                    var total = result.total;
                    var pages = Math.ceil(total/rows);

                    if(total>0){
                        createpages(page,pages);
                    }
                }
            }
        });
    }

    function createpages(pageNow,total) {

        $("#i_ul_page").html("");
        var preli;
        if(pageNow==1){
            preli = $("<li class='am-disabled'><a href='#'>«</a></li>")
        }else{
            preli = $("<li><a href='javascript:loadTable(1);'>«</a></li>")
        }
        $("#i_ul_page").append(preli);

        if(total<=5){
            for(var i=1;i<=total;i++){
                var li;
                if(i==pageNow){
                    li = $("<li class='am-active'><a href='#'>"+i+"</a></li>")
                }else{
                    li = $("<li><a href='javascript:loadTable("+i+");'>"+i+"</a></li>")
                }
                $("#i_ul_page").append(li);
            }
        }else{
            //画前面5个
            if(pageNow<=3){
                for(var i=1;i<=5;i++){
                    var li;
                    if(i==pageNow){
                        li = $("<li class='am-active'><a href='#'>"+i+"</a></li>")
                    }else{
                        li = $("<li><a href='javascript:loadTable("+i+");'>"+i+"</a></li>")
                    }
                    $("#i_ul_page").append(li);
                }

            }
            //画后面5个
            else if((pageNow+2)>=total){
                for(var i=(total-4);i<=total;i++){
                    var li;
                    if(i==pageNow){
                        li = $("<li class='am-active'><a href='#'>"+i+"</a></li>")
                    }else{
                        li = $("<li><a href='javascript:loadTable("+i+");'>"+i+"</a></li>")
                    }
                    $("#i_ul_page").append(li);
                }
            }
            //画中间5个
            else{
                li1 = $("<li><a href='javascript:loadTable("+(pageNow-2)+");'>"+(pageNow-2)+"</a></li>")
                li2 = $("<li><a href='javascript:loadTable("+(pageNow-1)+");'>"+(pageNow-1)+"</a></li>")
                li3 = $("<li class='am-active'><a href='#'>"+pageNow+"</a></li>")
                li4 = $("<li><a href='javascript:loadTable("+(pageNow+1)+");'>"+(pageNow+1)+"</a></li>")
                li5 = $("<li><a href='javascript:loadTable("+(pageNow+2)+");'>"+(pageNow+2)+"</a></li>")
                $("#i_ul_page").append(li1);
                $("#i_ul_page").append(li2);
                $("#i_ul_page").append(li3);
                $("#i_ul_page").append(li4);
                $("#i_ul_page").append(li5);
            }
        }


        var sufli;
        if(pageNow==total){
            sufli = $("<li class='am-disabled'><a href='#'>»</a></li>")
        }else{
            sufli = $("<li><a href='javascript:loadTable("+total+");'>»</a></li>")
        }
        $("#i_ul_page").append(sufli);
    }


    //初始化弹窗
    $("#modal-add").iziModal({
        title: "添加人员",
        headerColor: '#00af66',
        width: 600,
        transitionIn: 'comingIn',
        transitionOut: 'comingOut',
        transitionInOverlay: 'fadeIn',
        transitionOutOverlay: 'fadeOut',
        overlayClose: false,
        closeOnEscape: false,
        fullscreen: true,
        openFullscreen: false
    });

    $("#addMember").iziModal({
        title: "添加用户",
        headerColor: '#00af66',
        width: 600,
        transitionIn: 'comingIn',
        transitionOut: 'comingOut',
        transitionInOverlay: 'fadeIn',
        transitionOutOverlay: 'fadeOut',
        overlayClose: false,
        closeOnEscape: false,
        fullscreen: true,
        openFullscreen: false
    });

    //打开弹窗
    function openAdd() {
        $("#modal-add").iziModal('open');
    }

    function closeAdd() {
        $("#modal-add").iziModal('close');
    }

    function edit(btn) {
        var tr = $(btn).parent().parent().parent();
        var stafferId = tr.children().eq(0).html();
        var name = tr.children().eq(1).html();
        var phoneNum = tr.children().eq(2).html();
        var deptId = tr.children().eq(3).attr("name");
        $("#i_staffId").val(stafferId);
        $("#i_name").val(name);
        $("#i_phoneNum").val(phoneNum);
        $("#i_deptId").val(deptId);
        $("#modal-add").iziModal('setTitle','修改人员');
        $("#modal-add").iziModal('open');
    }

    function addMember(stafferId) {
        $("#addMember").iziModal('open');
    }


</script>
</body>
</html>